<template>
	<view class="content">
		<view class="item" :id="0" @tap="handleRemindClick">
			<view class="item-border todo">
				<text class="item-border-num">{{todoCount}}</text>
			</view>
			<text class="item-title">代办事项</text>
		</view>
		<view class="item" :id="1" @tap="handleRemindClick">
			<view class="item-border">
				<text class="item-border-num">0</text>
			</view>
			<text class="item-title">已办事项</text>
		</view>
		<view class="item" :id="2" @tap="handleRemindClick">
			<view class="item-border">
				<text class="iconfont item-border-icon">&#xe60e;</text>
			</view>
			<text class="item-title">请假申请</text>
		</view>
		<view class="item" :id="3" @tap="handleRemindClick">
			<view class="item-border">
				<text class="iconfont item-border-icon">&#xe635;</text>
			</view>
			<text class="item-title">外出申请</text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"remind",
		data() {
			return {
				
			};
		},
		props:{
			todoCount:{
				type:Number,
				default:0
			},
			todoList:{
				type:Array,
				default:[]
			}
		},
		methods:{
			handleRemindClick (e) {
				let index = e.currentTarget.id
				switch (index){
					case '2':
						uni.navigateTo({
							url:'/pages/index/leave/leave'
						})
						break;
					case '3':
						uni.navigateTo({
							url:'/pages/index/go-out/go-out'
						})
						break;
					case '0':
						uni.navigateTo({
							url: '/pages/index/todo/todo?todoList='+JSON.stringify(this.todoList)
						});
						break;
					default:
						return
						break;
				}
			},
			toast(title,icon='none'){
				uni.showToast({
					title: title,
					mask: true,
					icon:icon,
					duration: 1500
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.content{
	height: 200upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 40upx;
	background-color: $uni-bg-color;
	.item {
		color: $uni-text-color;
		padding-right: 40upx;
		text-align: center;
		border-right: 1upx solid #e5e5e5;
		
		.item-border{
			width: 80upx;
			height: 80upx;
			border: 1px solid #e5e5e5;
			border-radius: 4px;
			
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: center;
			.item-border-num {
				font-size: 56upx;
				font-weight: normal;
			}
			.item-border-icon {
				font-size: 56upx;
				color: #007AFF;
			}
		}
	}
	.item:last-child {
		border-right: 0;
		padding-right:0;
	}
	.item-title {
		font-size: 26upx;
		color: #666;
	}
}
</style>
